@charset 'utf-8'

@import './base'
@import './dropload.css'
$main-color=#333
$secondary-color=#666
$white=#fff
$assist-color=#9f9f9f
shadow-block()
    border-radius rem(20)
    background-color $white
    box-shadow 0px 5px 16px 0px rgba(4, 0, 0, 0.11)
    margin-left rem(30)
    margin-right rem(30)
    margin-bottom rem(10)
    border rem(2) solid #fbbd0a
    overflow hidden
body
    background-color #fff
    height 100%
a
    text-decoration none
    color inherit
.proxy-index
    box-sizing border-box
    padding rem(10) rem(0) rem(100)
    height 100%
    overflow auto
    box-sizing border-box
    .proxy-body
        color $main-color
        padding rem(40) rem(20)
        bottomLine()
        .proxy-name
            font-size rem(44)
            line-height rem(44)
            padding-right rem(25)
            margin-bottom rem(40)
        .proxy-mobile, .proxy-company
            color $secondary-color
        .proxy-mobile
            font-size rem(30)
            padding-left rem(20)
        .proxy-company
            font-size rem(34)
            line-height rem(34)
            ellipsis()
    .proxy-overview
        display none
        shadow-block()
        margin-top rem(30)
        padding-top rem(50)
        padding-bottom rem(45)
        text-align center
        color $assist-color
        p
            font-size rem(30)
            text-align center
            .count
                color $main-color
        .amount
            color $main-color
            font-size rem(66)
            line-height rem(66)
            margin-bottom rem(40)
            small
                font-size rem(30)
.proxy-fixed-bottom
    position fixed
    width 100%
    left 0
    bottom 0
    display flex
    .btn
        display flex
        width 50%
        justify-content center
        align-items center
        border-radius 0
.goto-device-list
    font-size rem(32)
    color $main-color
    margin-left rem(30)
    padding-left rem(40)
    line-height rem(38)
    background url('ctx/asset/images/coco/arrow-left.png') 0% 50% no-repeat transparent
    background-size rem(20) rem(38)
    margin-bottom rem(30)
    margin-top rem(30)
.device-tabs, .overview-tabs
    bottomLine()
    margin-bottom rem(40)
    text-align center
    background-color $white
    .tab
        padding rem(30) rem(0)
        display inline-block
        margin-right rem(70)
        font-size rem(30)
        &:last-child
            margin-right 0
    .tab-active
        border-bottom rem(1) solid #fbbd0a
.device-tabs-fixed
    position fixed
    width 100%
    left 0
    top 0
.device-lists
    height 100%
    padding-top rem(350)
    box-sizing border-box
    overflow hidden
.device-list
    height inherit
    overflow auto
    .device-item
        shadow-block()
        font-size rem(30)
        color $secondary-color
        padding rem(40) rem(36)
        margin-bottom rem(20)
        p
            ellipsis()
.proxy-device
    box-sizing border-box
    padding rem(10) rem(0) rem(100)
    height 100%
    overflow auto
    box-sizing border-box
    .proxy-header
        background-color $white
        position absolute
        width 100%
        top 0
        left 0
    .proxy-body
        color $main-color
        padding rem(40) rem(20)
        bottomLine()
        .proxy-name
            font-size rem(44)
            line-height rem(44)
            padding-right rem(25)
            margin-bottom rem(40)
        .proxy-mobile, .proxy-company
            color $secondary-color
        .proxy-mobile
            font-size rem(30)
            padding-left rem(20)
        .proxy-company
            font-size rem(34)
            line-height rem(34)
            ellipsis()